<template>
  <div class="content">
    <div class="con">
      <!-- <div class="selectList">
        <el-tooltip style="margin-left: 10px" content="以图搜图" placement="bottom" popper-class="atooltip">
          <el-button
            @click="showUpload"
            type="primary"
            icon="el-icon-camera-solid"
            size="mini"
            circle
            :style="
              VideoPhotoData.uploadDiaplay
                ? 'margin-right: 20px;'
                : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'
            "
          ></el-button>
        </el-tooltip>
        <el-form ref="form" :model="form" label-width="80px">
          <div class="select_library">
            <el-select
              v-model="tagValues"
              multiple
              :disabled="isDisabled"
              collapse-tags
              placeholder="请选择底库"
              @change="tagChange"
            >
              <el-option
                v-for="item in VideoPhotoData.tabs"
                style="font-size: 12px"
                :key="item.key"
                :label="item.title"
                :value="item.value"
                :title="item.title"
              ></el-option>
            </el-select>
          </div>
          <div class="search_con">
            <el-input v-model="searchText" placeholder="请输入内容"></el-input>
          </div>
          <div class="block">
            <el-date-picker
              size="small"
              v-model="searchTime"
              @change="selectTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="margin-right: 10px; background: #2c2c2d"
            >
            </el-date-picker>
          </div>
          <div>
            <el-select v-model="taskValues" multiple placeholder="请选择场景">
              <el-option v-for="item in VideoPhotoData.tasks" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div>
            <el-input v-model="inputName" placeholder="请输入姓名"  :disabled="true"></el-input>
          </div>
          <div>
            <el-select :disabled="true" v-model="gender" placeholder="请选择性别">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select :disabled="true" v-model="tags" placeholder="请选择标签">
              <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              v-model="alarmValues"
              multiple
              @change="searchingBtn()"
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              placeholder="请选择事件等级"
            >
              <el-option
                v-for="item in VideoPhotoData.dictionary.ALARMLEVEL"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="aside_bottom">
            <el-button size="mini" @click="clearSearch">重置</el-button>
            <el-button size="mini" @click="searchingBtn()">搜索</el-button>
          </div>
        </el-form>
      </div> -->
      <el-container>
        <div class="aside_wrap">
          <el-aside width="200px" style="height: 100%">
            <UploadImg
              @labelDisabled="imgDisabled"
              @thresholdChange="thresholdChange"
              @searchStart="searchStart"
              @resetChange="resetChange"
              style="margin-top: 10px"
              :uploadImgs="editImg"
            />
            <!-- <div class="aside_box" v-show="!VideoPhotoData.uploadDiaplay">
              <el-form ref="form" :model="form" label-width="80px">
                <div class="big_image">
                  <img src="@/assets/images/statisticsQueryManage/person.png" alt="">
                </div>
                <div class="imageAll">
                  <img src="@/assets/images/statisticsQueryManage/mask.png" alt="">
                  <img src="@/assets/images/statisticsQueryManage/mask.png" alt="">
                  <img src="@/assets/images/statisticsQueryManage/mask.png" alt="">
                </div>
                <div class="comparison_box">
                  <span>对比阈值</span>
                  <div class="block" style="width: 50%;">
                    <el-slider v-model="sliderValue" input-size="mini"></el-slider>
                  </div>
                  <el-input-number size="mini" style="width: 31%;" v-model="sliderValue" controls-position="right" :min="0"
                    :max="100"></el-input-number>
                </div>
                <div class="select_library">
                  <el-select collapse-tags style="width: 100%;" v-model="tagValues" multiple placeholder="请选择底库">
                    <el-option v-for="item in VideoPhotoData.tabs" :key="item.key" :label="item.label" :value="item.title">
                    </el-option>
                  </el-select>
                </div>
                <div class="search_con">
                  <el-autocomplete style="width: 100%;" class="inline-input" v-model="searchCon"
                    :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </div>
                <div class="block">
                  <el-date-picker  size="mini"
                v-model="searchTime"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                style="width: 100%;height:32px; min-width: 200px;background:#36596F">
                  </el-date-picker>
                </div>
                <div>
                  <el-select style="width: 100%;" v-model="taskValues" multiple placeholder="请选择场景">
                    <el-option v-for="item in VideoPhotoData.tasks" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <el-input v-model="inputName" placeholder="请输入姓名"></el-input>
                </div>
                <div>
                  <el-select v-model="gender" style="width: 100%;" placeholder="请选择性别">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <el-select v-model="gender" style="width: 100%;" placeholder="请选择标签">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <el-select v-model="alarmValues" multiple @change="searchingBtn" :disabled="isDisabled" collapse-tags
                    size="mini" style="width: 100%; min-width: 120px" placeholder="请选择事件等级">
                    <el-option v-for="item in VideoPhotoData.dictionary.ALARMLEVEL" :key="item.id" :label="item.name"
                      :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form>
            </div>
            <div class="aside_bottom" v-show="!VideoPhotoData.uploadDiaplay">
              <el-button>重置</el-button>
              <el-button @click="searchingBtn()">搜索</el-button>
            </div> -->
          </el-aside>
        </div>
        <el-main>
          <div class="main_list">
            <el-card class="box-card" v-for="(item, index) in VideoPhotoData.cards" :key="index">
              <div class="box-card_border">
                <div class="box-card_top" v-if="!VideoPhotoData.isComparison">
                  <div class="card_left">
                    <el-image
                      @click="rightBlock2(item, index)"
                      :src="'/httpImage/' + item.personPicUrl"
                      fit="cover"
                    >
                    </el-image>
                  </div>
                  <div class="card_right">
                    <div class="particulars" @click="particularsChange(item,index)"><img src="@/assets/images/statisticsQueryManage/particulars.png" alt="">详情</div>
                    <!-- <h3>{{ item.list[0].cameraName }}</h3> -->
                    <h3 >{{ item.Familiarity }} %</h3>
                    <h4>小区:{{ item.residentialArea }}</h4>
                    <p >机构:{{ item.community }}</p>
                    <!-- <p>出现地点:{{ item.list[0].taskName }}&nbsp;&nbsp;{{ item.list[0].alarmRules[0].alarmLevel }}</p> -->
                    <p>出现地点:{{ item.location }}</p>
                    <p>出现时间:{{ item.lastLocation }}</p>
                    <!-- <el-tooltip class="item" effect="dark" :content="item.list[0].showLabels" placement="top">
                      <p style="width: 12em;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">{{ item.list[0].showLabels }}</p>
                    </el-tooltip> -->
                  </div>
                </div>
                <!-- <div class="box-card_top" v-if="VideoPhotoData.isComparison">
                  <div class="comparison_card_left">
                    <div class="snap-image-box">
                      <el-image :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl" class="img-left"></el-image>
                      <el-image :src="'/httpImage/' + item.list[0].targetInfo[0].picSmUrl" class="img-right"></el-image>
                      <div class="radio-view">{{ item.list[0].baseInfo[0].compareScore.toFixed(2) }}%</div>
                    </div>
                  </div>
                  <div class="card_right">
                    <h3 v-if="!VideoPhotoData.uploadType">{{ item.list[0].cameraAddr }}</h3>
                    <h3 v-if="VideoPhotoData.uploadType">{{ item.list[0].compareScore }} %</h3>
                    <h4>{{ item.list[0].picDate }}</h4>
                    <p v-if="VideoPhotoData.uploadType">{{ item.list[0].cameraAddr }}</p>
                    <p>{{ item.list[0].taskName }}&nbsp;&nbsp;{{ item.list[0].alarmRules[0].alarmLevel }}</p>
                    <p>{{ item.list[0].showLabels }}</p>
                  </div>
                </div> -->
                <!-- <div class="box-card_bottom">
                  <el-button style="color: #fff" size="mini" @click="rightBlock2(item, index)" type="text"
                    ><i class="el-icon-s-claim"></i>详情</el-button
                  >
                  |
                  <el-button style="color: #fff" size="mini" type="text" :disabled="true"><i class="el-icon-s-claim"></i>收藏</el-button>
                  |
                  <el-button style="color: #fff" size="mini" type="text" @click="searchUser(item,index)"
                    ><i class="el-icon-s-claim"></i>查找此人</el-button
                  >
                  |
                  <el-button style="color: #fff" size="mini" type="text" @click="addPedestal(item,index)"
                    ><i class="el-icon-s-claim"></i>加入底库</el-button
                  >
                </div> -->
              </div>
            </el-card>
          </div>

          <div class="btn-pager">
            <PagerView
              class="page"
              layout="sizes, prev, pager, next"
              :pager-options="productPagerOptions"
              :pageSizes="VideoPhotoData.pageSizeOption"
              @current-change="currentProductHandler"
              @size-change="productChangeHandler"
            />
          </div>
        </el-main>
      </el-container>
    </div>
    <!-- 预览图片 -->
    <PreviewImageDialog :edit-common-config="editConfig" />
  </div>
</template>

<script>
import getVideoPhoto from "@/components/searching/Pool/VideoPhotoData"
import UploadImg from "@/components/searching/UploadImg"
import { findPersonByPic } from '@/api/statisticsQueryManage/statisticsQueryManage.js'
import PreviewImageDialog from "@/views/panoramicData/components/PreviewImageDialog"
export default {
  name: "statisticsQueryPage",
  mixins: [getVideoPhoto],
  props: {},
  components: {
    UploadImg,
    PreviewImageDialog
  },
  data() {
    return {
      isShowPedestal:true,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      sliderValue: 25,
      options1: [
        {
          value: "0",
          label: "男"
        },
        {
          value: "1",
          label: "女"
        },
        {
          value: "2",
          label: "未知"
        }
      ],
      gender: "",
      tags: "",
      tagValues: [],
      searchCon: "",
      restaurants: [],
      selectDate: "",
      inputName: "",
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      userImgList: [],
      taskValues: [],
      typeDisable: false,
      alarmValues: [],
      isDisabled: false,
      
      // searchTime:[
      //   "2022-11-09 00:00:00",
      //   "2024-01-09 16:28:05",
      // ],
      searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
      alarmlevel: [],
      searchText: "",
      pageSizes: [30, 60, 120],
      editConfig: {
        visible: false,
        infomation: [],
        personIndex:0,
        currentId: "",
        isLookImg:false,
        tabs:[],
      },
      tabs:[],
      editImg:{
        isUploadImg:true,
        resReady:false,
        realSmallPath:[],
        imageUrl:"",
      }
      // isComparison:false,
    }
  },
  created() {
    if(this.$route.params.userInfo){
      console.log("have-data")
      this.editImg.isUploadImg=false
      this.editImg.resReady=true
      this.editImg.imageUrl=this.$route.params.userInfo.personPicUrl
      this.editImg.realSmallPath=[this.$route.params.userInfo.personPicUrl,'','']
      this.VideoPhotoData.uploadDiaplay=true
      this.searchImgs()
    }else{
      console.log("null-data")
      this.searchingBtn()
      this.clearSearch()
    }
    this.VideoPhotoData.page = 1
    this.VideoPhotoData.size = 30
    this.queryTagList() //底库列表
    // this.queryTaskList() // 场景列表
    this.queryDictionary()
    // this.searchTime=[
    //   "2022-11-09 00:00:00",
    //   "2024-01-09 16:28:05",
    // ],
    this.searchTime = [this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")]
    this.VideoPhotoData.searchTime = this.searchTime
  },
  watch: {
    // VideoPhotoData: {
    //   handler(){
    //     console.log(this.VideoPhotoData.total,'====44444')
    //   },
    //   deep:true,
    //   immediate:true,
    // } 
  },
  computed: {
    breadcrumbRoutes() {
      // let matchedArr = this.$route.matched.filter((item)=>{
      //     return item.meta.showInbreadcrumb}
      // );
      // // 因为首页比较特殊，必须一直显示在面包屑第一个，如果没有首页路由信息，手动添加到最前面
      // if(matchedArr[0].meta.title !== '首页'){
      //     matchedArr.unshift(
      //         {
      //             path:'/home',
      //             meta:{  
      //                 title:"首页",
      //                 showInbreadcrumb:true
      //             }
      //         },
      //     )
      // }
      // console.log(this.$route ,"路由路径")
      // return matchedArr;
      return this.$route.matched // 获取当前路由的所有嵌套路径段
    }
  },
  mounted() {
    console.log(this.VideoPhotoData,"看看是啥6688886")
  },

  methods: {
    closePedestal(done) {
      done();
    },
    getData() {
      this.searchingBtn()
    },
    // 抓拍数据
    rightBlock2(data) {
      // console.log(data,index,"查看详情")
      // this.editConfig.isLookImg=true
      // let sanpObj = this.VideoPhotoData.cards[index].activeObject
      // this.editConfig.infomation = this.VideoPhotoData.cards
      // this.editConfig.currentId = sanpObj.id
      // this.editConfig.personIndex=index
      // this.editConfig.visible = true
      
      // 跳转人像归档页面
      this.$router.push({ path: 'portraitFilingPage/details', query: { id: data.id}})

    },
    // 查找此人
    searchUser(item){
      this.editImg.isUploadImg=false
      this.editImg.resReady=true
      this.editImg.imageUrl=item.activeObject.targetInfo[0].picSmUrl
      this.editImg.realSmallPath=[item.activeObject.targetInfo[0].picSmUrl,'','']
      this.VideoPhotoData.uploadDiaplay=true

      let param = {
        page: this.VideoPhotoData.page,
        size: this.VideoPhotoData.size,
        searchTime:[this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
        alarmlevel: this.VideoPhotoData.queryAlarmlevel,
        inputValue: this.VideoPhotoData.inputValue,
        tasks: this.VideoPhotoData.queryTabs,
        compTargetType: 1,
        treeNodes: this.VideoPhotoData.treeNodes,
        picUrl: item.activeObject.targetInfo[0].picSmUrl,
        compTargetId:item.activeObject.id,
        // databases: ["esData"],
        threshold: 60,
      }
      this.searchUserImg(param)
    },
    // 加入底库
    addPedestal(item){
      this.editConfig.isLookImg=false
      this.editConfig.currentId = item.list[0].id
      this.editConfig.visible = true
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      console.log(item)
    },
    // getSearchList() {
    //   getSearchList({
    //     page: 1,
    //     size: 60,
    //     searchTime: [
    //       "2023-11-23 00:00:00",
    //       "2023-12-23 23:59:59"
    //     ],
    //     alarmlevel: [],
    //     inputValue: "",
    //     tabs: [],
    //     tasks: [],
    //     treeNodes: [],
    //     dataSource: "camera",
    //     collection: ""
    //   }).then((res) => {
    //     this.userImgList = res.data.datalist
    //   })
    // },
    clearSearch() {
      this.tagValues = []
      this.taskValues = []
      this.collection = ""
      this.alarmValues = []
      this.VideoPhotoData.queryTabs = []
      this.VideoPhotoData.queryTasks = []
      this.VideoPhotoData.queryAlarmlevel = []
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.VideoPhotoData.inputValue = ""
      this.VideoPhotoData.collection = ""
      this.searchTime = this.getDateInit()
      this.searchText = ""
      this.gender = ""
      this.VideoPhotoData.page = 1
      if (!this.VideoPhotoData.uploadType) {
        // this.setLoadSearch(this.querySearchList())
        this.VideoPhotoData.cards=[]
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.findPersonByPage())
      }
    },
    getDateInit() {
      // 要求 默认一个月
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      // console.log(this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),"日期啊啊")
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },
    searchingBtn(val) {
      this.VideoPhotoData.queryTabs = this.tagValues
      //处理搜索类型
      var tempArr = this.taskValues.map((task) => task.split(","))
      var tasks = []
      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr)
      })
      this.VideoPhotoData.queryTasks = tasks
      this.VideoPhotoData.page = val ? val : 1
      this.VideoPhotoData.queryAlarmlevel = this.stringToNum()
      // this.VideoPhotoData.searchTime = this.format(this.searchTime)
      this.searchTime = [this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")]
      this.VideoPhotoData.searchTime = this.searchTime
      // this.VideoPhotoData.searchTime = [
      //     "2021-12-09 00:00:00",
      //     "2024-01-09 16:28:05",
      //   ],
      this.VideoPhotoData.inputValue = this.searchText
      this.VideoPhotoData.showType = this.showType
      this.VideoPhotoData.collection = this.collection
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false
        // this.VideoPhotoData.querySearchList();
        // 列表接口
        this.VideoPhotoData.cards=[]
        // this.setLoadSearch(this.querySearchList())
      } else {
        //this.page = this.currentPage;
        // this.findPersonByPage();
        this.setLoadSearch(this.findPersonByPage())
      }
    },
    stringToNum() {
      var arr = []
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1)
        }
        if (element == "1") {
          arr.push(1)
        }
        if (element == "2") {
          arr.push(2)
        }
        if (element == "3") {
          arr.push(3)
        }
        if (element == "4") {
          arr.push(4)
        }
        if (element == "5") {
          arr.push(5)
        }
      })
      return arr
    },
    setLoadSearch(fn) {
      fn.then((res) => {
        console.log(res, "ress")
        // this.AuthData.closeLoad()
      })
    },

    httpImage(url) {
      if (!url.length) {
        return ""
      }
      // "/httpImage/"
      return "http://" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160"
    },
    formatDateTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, "0")
      const day = String(date.getDate()).padStart(2, "0")
      const hours = String(date.getHours()).padStart(2, "0")
      const minutes = String(date.getMinutes()).padStart(2, "0")
      const seconds = String(date.getSeconds()).padStart(2, "0")

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay
      //初始化数据
      this.clearStatus()
      // this.CardList.details = []
      if (!this.VideoPhotoData.uploadDiaplay) {
        // this.searchingBtn()
      }
      //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
    },
    searchStart(displayUpload, picUrl, compareTabs) {
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.picUrl = picUrl
      this.VideoPhotoData.compareTabs = compareTabs
      console.log("选的库：", compareTabs)
      this.VideoPhotoData.showType = "findByPic"
      if (displayUpload) {
        this.findPerson()
      } else {
        this.findPerson2()
      }
    },
    imgDisabled(data) {
      this.isDisabled = data
    },
    thresholdChange(value) {
      this.VideoPhotoData.threshold = value
    },
    productChangeHandler(val) {
      this.VideoPhotoData.size = val
      this.searchingBtn()
    },
    currentProductHandler(val) {
      this.VideoPhotoData.page = val
      this.searchingBtn(this.VideoPhotoData.page)
    },
    selectTime(val) {
      console.log(val, "val")
    },
    // 选择底库
    tagChange(e){
      this.searchingBtn()
      console.log(e)
    },
    // 图搜图
    async searchImgs(){
      var param = {
        page: this.VideoPhotoData.page,
        size: this.VideoPhotoData.size,
        // searchTime: [
        //   "2022-01-12 00:00:00",
        //   "2024-01-12 15:14:02"
        // ],
        // searchTime:[this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
        // alarmlevel: this.VideoPhotoData.queryAlarmlevel,
        // inputValue: this.VideoPhotoData.inputValue,
        tasks: this.VideoPhotoData.queryTabs,
        compTargetType: 0,
        // treeNodes: this.VideoPhotoData.treeNodes,
        picUrl: this.$route.params.userInfo.personPicUrl,
        compTargetId:this.$route.params.userInfo.id,
        // databases: ["esData"],
        threshold: 1,
        // isAll: this.VideoPhotoData.searchFrom == "cluster" ? true : false
      }
      const rsp = await findPersonByPic(param);
      this.VideoPhotoData.cards=[]
      if (rsp && rsp.success) {
        rsp.data.totalList.forEach(element => {
          var obj = {
            activeObject: (element),
            list: []
          }
          element.ownerPage = this.VideoPhotoData.page
          // element.picDate=diffTime(element.picDate)
          obj.list.push((element))
          this.VideoPhotoData.cards.push(obj)
        });
        this.VideoPhotoData.total = rsp.data.total
        this.productPagerOptions.totalCount=rsp.data.total;
        this.VideoPhotoData.compareNum = rsp.data.compareNum
        this.isCardShow=false;
        this.$nextTick(()=>{
          this.isCardShow=true;
          this.$forceUpdate()
        })
      }
    },
     // 查找此人
     async searchUserImg(param){
      
      const rsp = await findPersonByPic(param);
      this.VideoPhotoData.cards=[]
      if (rsp && rsp.success) {
        rsp.data.totalList.forEach(element => {
          var obj = {
            activeObject: (element),
            list: []
          }
          element.ownerPage = this.VideoPhotoData.page
          // element.picDate=diffTime(element.picDate)
          obj.list.push((element))
          this.VideoPhotoData.cards.push(obj)
        });
        this.VideoPhotoData.total = rsp.data.total
        this.productPagerOptions.totalCount=rsp.data.total;
        this.VideoPhotoData.compareNum = rsp.data.compareNum
        this.isCardShow=false;
        this.$nextTick(()=>{
          this.isCardShow=true;
          this.$forceUpdate()
        })
      }
    },
    // 详情
    particularsChange(data){
      // 跳转人像归档页面
      this.$router.push({ path: 'portraitFilingPage/details', query: { id: data.id}})

      // this.editConfig.isLookImg=true
      // let sanpObj = data
      // this.editConfig.infomation = this.VideoPhotoData.cards
      // this.editConfig.currentId = sanpObj.id
      // this.editConfig.personIndex=index
      // this.editConfig.visible = true
    },
    // 重置
    resetChange(){
      this.VideoPhotoData.page = 1
      if (!this.VideoPhotoData.uploadType) {
        // this.setLoadSearch(this.querySearchList())
        this.VideoPhotoData.cards=[]
      } else {
        this.setLoadSearch(this.findPersonByPage())
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 50px);

  .con {
    margin-top: 20px;
    .header {
      width: 100%;
      height: 80px;
      background-color: #141415;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header_left {
        width: 300px;
        height: 50px;
        margin-left: 5px;

        h3 {
          margin: 0 0 10px 0;
          color: #fff;
          font-size: 30px;
        }

        .el-breadcrumb {
          color: #fff;
        }
      }

      .header_right {
        color: #fff;
        margin-right: 20px;
      }
    }

    .el-container {
      height: calc(100vh - 50px);
      background-color: #141415;
      .aside_wrap{
        height: calc(100vh - 50%);
      }
      .el-aside {
        width: 300px !important;
        box-sizing: border-box;
        margin: 0px 10px 0px 10px;
        background-image: url("@/assets/images/background_aside.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .aside_box {
          margin: 20px 10px 10px 10px;
          padding: 10px;
          background-color: #1f465f;
          border-radius: 4px;
          height: 80%;

          .el-form {
            display: flex;
            align-content: space-around;
            justify-content: center;
            flex-wrap: wrap;
            height: 100%;
            color: #ffffff;
            .big_image{
              img{
                width: 100%;
                height: 100%;
              }
            }
            .imageAll{
              display: flex;
              justify-content: space-between;
              img{
                width: 30%;
              }
            }
            div {
              width: 100%;
            }
          }

          .aside_box-top {
            .el-image {
              width: 100%;
            }
          }

          .aside_box_imgs {
            display: flex;
            justify-content: space-between;
          }

          .comparison_box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-input-number {
              // padding: 0;
              // padding-left:15px
            }

            span {
              font-size: 12px;
            }
          }
        }
      }

      .el-main {
        padding: 0px;
        padding-right: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: flex-start;
        // height: calc(100vh - 100px);

        .main_list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          height: 84%;
          overflow: auto;

          .el-card {
            // background-color: #1c2a42;
            color: #fff;
            // width: 325px;
            width: 31%;
            box-sizing: border-box;
            display: flex;
            border-radius: 10px;
            margin-bottom: 10px;
            margin-right: 10px;
            // height: 180px;
            height: 156px;
            border: 3px solid transparent;
            border:3px solid #199394;
            cursor: pointer;
            background: rgba(46, 94, 171, 0.3);
            box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
            .box-card_border {
              width: 100%;
              height:100%;
              border-radius: 10px;

              .box-card_top {
                width: 100%;
                height:100%;
                .card_left {
                  width: 35%;

                  .el-image {
                    width: 130px;
                    height: 130px;
                    border-radius: 26px;
                  }
                }
                .comparison_card_left{
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-end;
                  .snap-image-box {
                    display: flex;
                    position: relative;
                    margin-bottom: 30px;
                    .img-right,
                    .img-left {
                      width: 100px;
                      height: 80px;
                    }
                    .img-right {
                      margin-left: 0px;
                    }
                    .radio-view {
                      position: absolute;
                      left: calc(50% - 45px);
                      bottom: 0px;
                      width: 80px;
                      height: 28px;
                      line-height: 28px;
                      border-radius: 6px;
                      background: #008000;
                      font-size: 16px;
                      text-align: center;
                    }
                  }
                }

                .card_right {
                  width: 65%;
                  padding-left: 10px;
                  position: relative;
                  .particulars{
                    position: absolute;
                    right: 12px;
                    top: 0px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    img{
                      margin-right: 5px;
                      width: 10px;
                      height: 14px;
                    }
                  }
                  h3 {
                    margin: 5px;
                    font-size: 16px;
                    color: #FF0101;
                    font-family: AlibabaPuHuiTi;
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 24px;
                  }

                  h4 {
                    margin: 5px;
                    font-size: 14px;
                  }

                  p {
                    font-size: 12px;
                    margin: 5px;
                    color: #ccc;
                  }
                }
              }

              .box-card_bottom {
                box-sizing:border-box;
                padding:0px 5px 0px 5px;
                border-top: 1.5px solid #ccc;
                height: 30px;
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: normal;
                line-height: 20px;
                letter-spacing: 0px;
                color: #ffffff;
                z-index: 2;
                .el-button {
                  font-family: PingFang SC;
                  color: #ffffff !important;
                  span {
                    i {
                      padding-right: 10px;
                    }
                  }
                }
              }
            }
          }

          .el-card:hover {
            border: 3px solid #33fefe;
            box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
          }

          .tn-pager {
            height: 20%;
          }
        }
      }
    }
  }

  .selectList {
    background: #141415;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;

    .el-form {
      display: flex;
      flex-wrap: wrap;

      .el-input {
        width: 150px;
        margin-right: 10px;
        margin-bottom: 5px;
      }

      .el-select {
        width: 150px;
        margin-bottom: 5px;
        margin-right: 10px;
      }

      .el-autocomplete {
        width: 150px;
        margin-bottom: 5px;
        margin-right: 10px;
      }
    }
  }
}
::v-deep {
  .el-pagination__jump {
    color: #fff;
  }
  .el-pagination__total {
    color: #fff;
  }
  .el-pagination__sizes {
    .el-select {
      .el-input--suffix {
        .el-input__inner {
          background: #1f2935 !important;
          color: #ffffff !important;
        }
      }
    }
  }
  .aside_bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;

    .el-button {
      border-radius: 60px;
      opacity: 1;
      color: #01c2ff;
      background: rgba(10, 26, 52, 0.6);
      border: 1px solid rgba(89, 175, 249, 0.7049);
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
    }
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: #1f2935;
    color: #ffffff;
  }
  .el-breadcrumb__inner {
    color: #ccc !important;
  }

  // .el-main
  .el-card__body {
    width: 100%;
    padding: 10px 10px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    .box-card_top {
      width: 100%;
      display: flex;

      .card_left {
        width: 45%;
      }
      .comparison_card_left{
        width:60%;
      }
      .card_right {
        width: 55%;
      }
    }

    .box-card_bottom {
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  .el-input {
    input {
      height: 32px !important;
    }

    .el-input__inner {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
  }

  .el-input-number__increase,
  .el-input-number__decrease {
    background-color: unset;
    color: #fff;
  }

  .el-scrollbar__view {
    background-color: #36596f;
  }

  .el-range-input {
    background: #2c2c2d;
    color: #fff;
  }
  .el-date-editor--datetimerange.el-input__inner {
    width: 220px;
  }
}

::v-deep .el-tag.el-tag--info {
  background-color: #5e6b79;
  border-color: #5e6b79;
  color: rgba(255, 255, 255, 0.9);
}
::v-deep .el-button--text {
  color: #ccc !important;
}
::v-deep .footer_button{
  position: absolute;
  bottom: 40px;
  right:60px;
}
::v-deep .el-checkbox>span{
  color: #fff;
  font-size:16px;
}
::v-deep .el-range-input{
  background-color: unset;
}

.btn-pager {
  width: calc(100% - 40px);
  justify-content: left;
  position:relative;
}
</style>
